<!--
 * @Author: Liang 1931226988@qq.com
 * @Date: 2023-08-19 08:52:15
 * @LastEditors: 凉月 1931226988@qq.com
 * @LastEditTime: 2023-08-21 21:28:27
 * @FilePath: \WanYi\src\pages\merit\merit.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="merit">
    <v-navigation title="值得买"></v-navigation>
    <v-advertisement></v-advertisement>
    <div class="merit_center">
      <image
        class="bgImg"
        src="https://yanxuan.nosdn.127.net/a93a392fb8006ba26dea38477979b7b4.jpg?imageView"
        mode="widthFix"
      />
      <div class="top_title">
        <image
          class="top_title_img"
          src="https://yanxuan.nosdn.127.net/0b7676e645253f84be662aacfc051922.png"
          mode="widthFix"
        />
        <top_title class="top_title_text">严选好物 用心生活</top_title>
      </div>
      <div class="swiper_card">
        <scroll-view class="swiper_wrap" :scroll-left="scrollLeft" scroll-x enable-flex @scroll="changeScroll">
          <div class="swiper_wrap_context">
            <div
              class="swiper_wrap_context_item"
              v-for="(item, index) in pageBanner.navList"
              :key="index"
            >
              <image
                class="swiper_wrap_context_item_img"
                :src="item.picUrl"
                mode="widthFix"
              />
              <div class="swiper_wrap_context_item_text">{{ item.mainTitle }}</div>
              <div class="swiper_wrap_context_item_text2">{{ item.viceTitle }}</div>
            </div>
          </div>
        </scroll-view>
      </div>
      <div class="merit_item">
        <v-merit-item v-for="(item , index) in pageItem" :data="item" :key="index"></v-merit-item>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted } from 'vue';
import { ref } from 'vue';
import Ajax from '@/api/index'

//轮播数据
const pageBanner = ref<any>({})
// 瀑布流数据
const page = ref<number>(10)
const size = ref<number>(10)
const pageItem = ref([])


const scrollLeft = ref<number>(0)
const changeScroll = (e:any) => {
    
    const scrollLeft_b = Math.round(e.detail.scrollLeft / 83.375)
    // scrollLeft.value = scrollLeft_b * 83.375
    // console.log(scrollLeft)
}

// 获取页面轮播数据
const getBanner = async() => {
    const res:any = await Ajax.reqMeritInfo()
    if(res.code == 200) {
        pageBanner.value = res.data
    }
    console.log(res)
}

// 获取瀑布流数据
const getData = async () => {
    const res:any = await Ajax.reqMeritList(size.value , page.value)
    console.log(res)
    pageItem.value = res.data.result
}


onMounted(() => {
    getBanner()
    getData()
})
</script>

<style scoped lang="less">
.merit {
  background-color: #eeeeee;
//   height: 100vh;
  .merit_center {
    margin-top: 68rpx;
    padding: 0 20rpx;
    position: relative;
    .bgImg {
      //   z-index: -1;
      position: absolute;
      left: 0;
      top: 0;
      width: 100vw;
    }

    .top_title {
      position: relative;
      border-top: 60rpx solid transparent;
      .top_title_img {
        width: 142rpx;
      }
      .top_title_text {
        position: absolute;
        bottom: 16rpx;
        left: 152rpx;
        color: #fff;
        font-size: 34rpx;
      }
    }

    .swiper_card {
      position: relative;
      z-index: 1;
      box-sizing: border-box;
      background-color: #fff;
      border-radius: 12rpx;
      width: 100%;
      padding: 40rpx 20rpx;
      //   height: 400rpx;
      .swiper_wrap {
        white-space: nowrap;
        width: 100%;
        // height: 100%;
        border: 1px solid pink;
        .swiper_wrap_context {
          width: 1150rpx;
            display: flex;
          //   flex-direction: column;
          flex-wrap: wrap;
          .swiper_wrap_context_item {
            width: 120rpx;
            margin: 10rpx 1.9%;
            height: 50%;
            display: flex;
            flex-direction: column;
            align-items: center;
            .swiper_wrap_context_item_img {
              width: 100%;
            }
            .swiper_wrap_context_item_text {
              font-size: 28rpx;
            }
            .swiper_wrap_context_item_text2 {
              font-size: 24rpx;
              color: #ccc;
            }
          }
        }
      }
    }

    .merit_item {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        margin-top: 20rpx;
    }

  }
}
</style>
